/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  Upload, Descriptions, DatePicker, Button,
} from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList:[]
    };
  }

  componentDidMount() {
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const {getFieldDecorator} = this.props.form;
    const props = {
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList }) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList: this.state.fileList,
      accept:".png, .jpg, .jpeg"
    };

    return (
      <div>
        <Form>
          <Descriptions  column={4}   className={'blue-descriptions'} title={<div style={{textAlign:'center'}}>车辆详情</div>} bordered>
            <Descriptions.Item label="车辆编号"  span={2}>
              {getFieldDecorator('number', {
                initialValue:this.props.editRecord?this.props.editRecord.number:'',
              })(
                <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="品牌"  span={2}>
              {getFieldDecorator('contact_name', {
                initialValue: this.props.editRecord?this.props.editRecord.contact_name:'',
              })(
               <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="车辆类型"  span={2}>
              {getFieldDecorator('mobile', {
                initialValue:this.props.editRecord?this.props.editRecord.mobile:'',
              })(
                <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="乘坐人数"  span={2}>
              {getFieldDecorator('remark', {
                initialValue: this.props.editRecord?this.props.editRecord.remark:'',
              })(
                <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="车牌号"  span={4}>
              {getFieldDecorator('remark', {
                initialValue: this.props.editRecord?this.props.editRecord.remark:'',
              })(
                <Input/>
              )}
            </Descriptions.Item>
            <Descriptions.Item label="车辆图片"  span={4}>
              <div className="dropbox">
                {getFieldDecorator('file', {
                  rules: [{required: true, message:''}],
                })(
                  <Upload {...props} style={{width:'100%'}}>
                    {
                      (this.props.editRecord&&this.props.editRecord.cover_image_path)?
                        this.state.fileList.length>0?<Button icon={'upload'} className={'btn-green'} block={true}>
                            点击选择
                          </Button>:
                          <img src={this.props.editRecord.cover_image_path} style={{width:'100px'}} alt=""/>:
                        <Button icon={'upload'} className={'btn-green'} block={true}>
                          点击选择
                        </Button>
                    }
                  </Upload>
                )}
              </div>
            </Descriptions.Item>
          </Descriptions>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


